<template>
	<view>
		<view class="center">
			<view class="shops">
				<block v-for="(item,index) in shopdata" :key="index">
					<view class="shoplist">
						<checkbox-group @change="selected(item)">
							<label>
								<checkbox class="selected" color="#555555" :checked="checked" />
							</label>
						</checkbox-group>
						<view class="shopmes">
							<view class="shopmesimg">
								<image :src="item.src"></image>
							</view>
							<view class="shopmesdat">
								<view class="shopmestit"><text class="shopmestitle">{{item.title}}</text></view>
								<view class="shopmespie">
									<text class="shopmespiece">￥{{item.piece}}</text>
									<view class="shopnumcge">
										<button size="mini">-</button>
										<input type="text" value="0" disabled />
										<button size="mini">+</button>
									</view>
								</view>

							</view>
						</view>
						<view class="shopdel"><text>删除</text></view>
					</view>
				</block>
			</view>
			<!-- 底部结算 -->
			<view class="bottom">
				<view class="bot">
					<view class="checkall">
						<image :src="checkbox ?'../../static/images/gou-red.png':'../../static/images/gou.png'" @click="checkedall"></image><text>全选</text>
					</view>
					<view class="piecemes">
						<text class="pieceall">合计：￥0</text>
						<text class="buy">去结算</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//购物车的商品数据
				shopdata: [{
						"title": "御泥坊蜂蜜",
						"src": "../../static/images/goods/14.jpg",
						"piece": "455",
						"checked": false,
						"num": "1"
					},
					{
						"title": "御泥坊面膜",
						"src": "../../static/images/goods/15.jpg",
						"piece": "455",
						"checked": false,
						"num": "1"
					},
					{
						"title": "御泥坊美容",
						"src": "../../static/images/goods/16.jpg",
						"piece": "3445",
						"checked": false,
						"num": "1"
					},
					{
						"title": "御泥坊人参",
						"src": "../../static/images/goods/17.jpg",
						"piece": "460",
						"checked": false,
						"num": "1"
					}
				],
				checked:false,
				//底部是否全选
				//总价格
				pieceall: 0,
				//购物车数量
				shopsnum: 0,
			}
		},
		computed: {

		},
		methods: {
			crss(ros) {
				let num = 0
				console.log(ros)
				for (let v of this.shopdata) {
					if (v.checked) {
						num += 1
					}
				}
			}
		}
	}
</script>



<style scoped>
	.top {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0px 40rpx;
		background-color: #EFEFEF;
	}

	.top view {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

	.center {
		margin-bottom: 99rpx;
	}

	/* 商品列表 */
	.shops {
		width: 100%;
		overflow: hidden;
	}

	.shoplist {
		box-sizing: border-box;
		display: flex;
		height: 300rpx;
		margin-left: 40rpx;
		border-bottom: #ccc 2rpx solid;
		width: 115%;
		position: relative;
	}

	.shopcheck {
		width: 15%;
		text-align: center;
		align-self: center;
		box-sizing: border-box;
		padding: 40rpx 0rpx;
	}

	.shopcheck image {
		width: 40rpx;
		height: 40rpx;
	}

	.shopmes {
		width: 85%;
		box-sizing: border-box;
		padding: 40rpx 0rpx;
		height: 100%;
		align-self: center;
	}

	.shopmesimg {
		width: 200rpx;
		height: 100%;
		float: left;
		padding-right: 30rpx;
	}

	.shopmesimg image {
		width: 200rpx;
		height: 200rpx;
	}

	.shopmesdat {
		float: left;
		width: 50%;
		height: 200rpx;
	}

	.shopmestit {
		padding: 30rpx 0rpx;
		width: 100%;
	}

	.shopmestitle {
		display: inline-block;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shopmespie {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0rpx;
		width: 100%;
	}

	.shopmespiece {
		color: red;
	}

	.shopdel {
		width: 20%;
		background-color: red;
		text-align: center;
		color: white;
		display: flex;
	}

	.shopdel text {
		align-self: center;
		margin: auto;
	}

	/* 数量改变按钮 */
	.shopnumcge button {
		width: 30rpx !important;
		height: 30rpx;
		padding: 0rpx 10rpx;
		padding-bottom: 20rpx;
		box-sizing: content-box;
		display: inline-block;
		border: 1px #ccc solid;
		vertical-align: top;
		border-radius: 0%;
		background-color: #cccccc3d;
	}

	.shopnumcge input {
		text-align: center;
		width: 50rpx;
		display: inline-block;
		padding: 3rpx 0rpx;
		border: 1px #ccc solid;
	}

	/* 底部价格栏 */
	.bottom {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #eee;
		position: fixed;
		bottom: 0px;
		border-top: 2rpx solid #aaaaaa;
		z-index: 2;
	}

	.bot {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

	.checkall {
		width: 40% !important;
		height: 100%;
		display: inline-block;
		padding-left: 50rpx;
	}

	.checkall image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}

	.piecemes {
		width: 60% !important;
		height: 100%;
		display: inline-block;
	}

	.pieceall {
		color: red;
	}

	.buy {
		width: 160rpx;
		background-color: red;
		color: white;
		font-size: 36rpx;
		float: right;
		text-align: center;
	}
</style>
